import { Alert, Button, Checkbox, Col, Divider, Form, Input, Row } from "antd";
import { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { AiFillGithub, AiFillGoogleCircle, AiFillWechat } from "react-icons/ai";

import { DEFAULT_USER, TEST_USER } from "@/_mock/assets";
import type { SignInReq } from "@/api/services/userService";
import { useSignIn } from "@/store/userStore";
import ProTag from "@/theme/antd/components/tag";
import { useThemeToken } from "@/theme/hooks";

import {
	LoginStateEnum,
	useLoginStateContext,
} from "./providers/LoginStateProvider";

const STORAGE_KEY = 'login_credentials';

function LoginForm() {
	const { t } = useTranslation();
	const themeToken = useThemeToken();
	const [loading, setLoading] = useState(false);
	const [form] = Form.useForm();

	const { loginState, setLoginState } = useLoginStateContext();
	const signIn = useSignIn();

	useEffect(() => {
		// 从本地存储加载保存的凭据
		const savedCredentials = localStorage.getItem(STORAGE_KEY);
		if (savedCredentials) {
			const { username, password, remember } = JSON.parse(savedCredentials);
			form.setFieldsValue({ username, password, remember });
		}
	}, [form]);

	if (loginState !== LoginStateEnum.LOGIN) return null;

	const handleFinish = async (values: SignInReq & { remember: boolean }) => {
		const { username, password, remember } = values;
		setLoading(true);
		try {
			await signIn({ username, password });
			// 根据remember选项保存或清除凭据
			if (remember) {
				localStorage.setItem(STORAGE_KEY, JSON.stringify({ username, password, remember }));
			} else {
				localStorage.removeItem(STORAGE_KEY);
			}
		} finally {
			setLoading(false);
		}
	};

	return (
		<>
			<div className="mb-4 text-2xl font-bold xl:text-3xl">
				{t("sys.login.signInFormTitle")}
			</div>
			<Form
				form={form}
				name="login"
				size="large"
				initialValues={{
					remember: true,
					username: "",
					password: "",
				}}
				onFinish={handleFinish}
			>
				<Form.Item
					name="username"
					rules={[
						{ required: true, message: t("sys.login.accountPlaceholder") },
					]}
				>
					<Input placeholder={t("sys.login.userName")} />
				</Form.Item>
				<Form.Item
					name="password"
					rules={[
						{ required: true, message: t("sys.login.passwordPlaceholder") },
					]}
				>
					<Input.Password
						type="password"
						placeholder={t("sys.login.password")}
					/>
				</Form.Item>
				<Form.Item>
					<Row align="middle">
						<Col span={12}>
							<Form.Item name="remember" valuePropName="checked" noStyle>
								<Checkbox>{t("sys.login.rememberMe")}</Checkbox>
							</Form.Item>
						</Col>
						<Col span={12} className="text-right">
							{/* <Button
								type="link"
								className="!underline"
								onClick={() => setLoginState(LoginStateEnum.RESET_PASSWORD)}
								size="small"
							>
								{t("sys.login.forgetPassword")}
							</Button> */}
						</Col>
					</Row>
				</Form.Item>
				<Form.Item>
					<Button
						type="primary"
						htmlType="submit"
						className="w-full"
						loading={loading}
					>
						{t("sys.login.loginButton")}
					</Button>
				</Form.Item>
			</Form>
		</>
	);
}

export default LoginForm;
